<template>
	<view class="content">
        <u-navbar
            bgColor="#fff" :fixed="true" :shadow="true"
            :safeAreaInsetTop="true" :placeholder="true"
            leftIconColor="#151C24" @leftClick="back"
            title="个人信息" titleColor="#151C24" >
        </u-navbar>
       
        <view class="card u-m-t-30 u-m-b-30">
            <view v-for="(item,index) in userInfo" :key="index" 
                class="item u-flex u-row-between u-font-28"
                @click="hand(index)">
                <text class="uni-gery-color">{{item.title}}</text>
                <text v-if="index!=1" :class="[index==4?'uni-higt-color':'']">{{item.value}}</text>
                <u-avatar v-else :src="item.value" size="34"></u-avatar>
            </view>
        </view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
                userInfo:[
                    { field:'userName', title:'姓名', value:'安薪乐' },
                    { field:'profile', title:'头像', value:'https://cdn.uviewui.com/uview/swiper/swiper2.png' },
                    { field:'sex', title:'性别', value:'安薪乐' },
                    { field:'acc', title:'账号', value:'安薪乐' },
                    { field:'phone', title:'手机号', value:'安薪乐' },
                    { field:'deptName', title:'单位名称', value:'安薪乐' },
                    { field:'districtName', title:'行政区域', value:'安薪乐' },
                ],
            }
		},

        created() {
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
                this.userInfo[1].value = path
			})
		},

		onLoad() {
            this.getUserInfo()
        },

        onReady(){ },

		methods: {
            back(){
                uni.navigateBack()
            },

            hand(index){
                if( index == 1 ){
                    // 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
                    uni.$u.route({
                        // 关于此路径，请见下方"注意事项"
                        url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
                        // 内部已设置以下默认参数值，可不传这些参数
                        params: {
                            // 输出图片宽度，高等于宽，单位px
                            destWidth: 300,
                            // 裁剪框宽度，高等于宽，单位px
                            rectWidth: 200,
                            // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
                            fileType: 'jpg',
                        }
                    })
                }
            },

            // 获取用户信息
            getUserInfo(){
                uni.showLoading({ title:'加载中' })
                this.$request(this,this.$apis.userInfo,{}).then(res=>{
                    console.log('用户信息',res)
                    this.userInfo.map((v,i)=>{
                        if( v.field == 'sex' ){
                            v.value = res[v.field]==0?'男':'女'
                        }else{
                            v.value = res[v.field]
                        }
                    })
                }).then()
            },
		}
	}
</script>

<style lang="scss">
    .content{
        background: #FBFCFC;
        .card{
            background: $uni-text-color-inverse;
            padding: 10rpx 30rpx;
            box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.05);
            .item{ 
                padding: 30rpx 0;
                border-bottom: 1rpx solid #eee;
                &:last-child{
                    border: none;
                }
            }
        }
    }
</style>
